<template>
    <header>
      <div class="header-top min-width">
        <div class="container fn-clear">
          <strong class="fn-left">
            咨询热线：400-000-0000
            <span class="s-time">服务时间：9:00 - 18:00</span>
          </strong>
          <ul class="header_contact">
            <li class="c_1">
              <a class="ico_head_weixin" id="wx"></a>
            </li>
            <li class="c_2">
              <a href="#" target="_blank" title="官方QQ" alt="官方QQ">
                <b class="ico_head_QQ"></b>
              </a>
            </li>
            <li class="c_4">
              <a href="#" target="_blank" title="新浪微博" alt="新浪微博">
                <b class="ico_head_sina"></b>
              </a>
            </li>
          </ul>

          <!-- 用户未登录 -->
          <ul v-if="!userName" class="fn-right header-top-ul">
            <li>
              <a>返回首页</a>
            </li>
            <li>
              <div class="">
                <a href="/register">
                  免费注册
                </a>
              </div>
            </li>
            <li>
              <div class="">
                <!-- Vue中借助router-link标签实现路由的切换 -->
                <a href="/login">
                  登录
                </a>
              </div>
            </li>
          </ul>

          <!-- 用户已登录 -->
          <ul v-if="userName" class="fn-right header-top-ul">
            <li><a href="/indexs">返回首页</a></li>
            <li>
              <div class="">
                <a class="user" href="/user/admin" title="我的账户">
                  <i class="el-icon-user-solid">{{userName}}</i>
                </a>
              </div>
            </li>
            <li>
              <div class="">
                <a
                    href="javascript:void(0)"
                    @click="logout()"
                    title="退出"
                >
                  退出
                </a>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="header min-width">
        <div class="container">
          <div class="fn-left logo">
            <a >
              <img src="@/assets/images/logo.png" title="" />
            </a>
          </div>
          <ul class="top-nav fn-clear">
            <li>
              <a href="/indexs">首页</a>
            </li>
            <li>
              <a href="/apdownload"> APP下载 </a>
            </li>
            <li>
              <a href="/news"> 公告新闻 </a>
            </li>
            <li>
              <a href="/computer/Center_1"> 企业贷款计算器 </a>
            </li>
            <li>
              <a href="/security">安全保障</a>
            </li>
            <li>
              <a href="/about">关于我们</a>
            </li>
          </ul>
        </div>
      </div>
    </header>

</template>

<script>
import '../assets/css/common.css'
export default {
  name: "AppHeader",
  data(){
    return{
      userName: '',
    }
  },
  mounted() {
    this.userName=JSON.parse(localStorage.getItem('userName'))
  },
  components:{
  },
  methods:{
    //退出
    logout() {
      localStorage.clear();
      window.location.href = '/login'
    },
  }

}
</script>

<style scoped>

</style>